<template>
	<div>
		<a-card :bodered="false" style="height: 66vh;overflow-y:auto;">
			<a-row>
				<div :style="{ borderBottom: '1px solid #E9E9E9' }">
					<a-checkbox
						@change="onCheckAllChange"
						:checked="checkAll"
					>
						{{checkAll?"全不选":"全选"}}
					</a-checkbox>
				</div>
				<br />
				<a-tree 
					:treeData="treeData" 
					:checkable="true" 
					:autoExpandParent="autoExpandParent" 
					:expandedKeys='expandedKeys' 
					:checkedKeys="checkedKeys"
					:checkStrictly="checkStrictly"
					:multiple="true" 
					@check="menuCheck"
					@expand="onExpand"
				/>
			</a-row>
		</a-card>
		<a-row style="text-align:center;margin-top:20px;">
			<a-button type="primary" @click="confirm" size="large" style="width:150px;">保存</a-button>
		</a-row>
	</div>
</template>

<script>
	export default{
		name:'permissionSetDetail',
		data(){
			return {
				treeData:[],//树结构数据
				allTreeKeys:[],//所有的树节点keys
				expandedKeys:[],//展开节点
				autoExpandParent: true,
				checkAll:false,//是否全部选中
				checkedKeys:[],//选中的keys
				checkStrictly:true,//checkStrictly
			}
		},
		mounted(){
			const _this = this;
			_this.initMenu();
		},
		methods:{
			//请求接口生成树形结构
			initMenu(){
				const _this = this;
				_this.getMenu("0").then(res => {
					var parentNodes = res.data;
					var loadIndex = 0;
					for(var i in parentNodes){
						_this.allTreeKeys.push(parentNodes[i].FID);
						_this.getMenu(parentNodes[i].FID,i).then(res2=> {
							var childrenNodes = res2.data;
							var index = res2.index;
							var arr = [];
							for(var idx in childrenNodes){
								_this.allTreeKeys.push(childrenNodes[idx].FID);
								arr.push({
									key:childrenNodes[idx].FID,
									title:childrenNodes[idx].FMenu
								})
							}
							_this.expandedKeys.push(parentNodes[index].FID);
							_this.treeData[index] = {
								key:parentNodes[index].FID,
								title:parentNodes[index].FMenu,
								children:arr
							}
							loadIndex++
							if(loadIndex === parentNodes.length){
								_this.initRoleMenu();
							}
						})
					}
				});
			},
			//获取角色权限列表
			initRoleMenu(){
				const _this = this;
				var froleID = _this.$route.query.FID;
				let objElem = new Object();
				let objJson = new Object();
				objElem.url = "/roleMenu/getRoleMenuList";
				objJson={
					froleID:froleID
				}
				objElem.data = objJson;
				objElem.success = (json => {
					var arr = new Array();
					for(var i in json){
						arr.push(json[i].FMenuID);
					}
					_this.checkedKeys = arr;
					// _this.checkStrictly = false;
				});
				_this.request(objElem);
			},
			//获取菜单请求
			getMenu(fparentId,index){
				const _this = this;
				return new Promise((resolve,reject) => {
					let objElem = new Object();
					let objJson = new Object();
					objElem.url = "/menu/getMenuList";
					objJson={
						fparentId:fparentId,
						ftype:"0"
					}
					objElem.data = objJson;
					objElem.success = (json => {
						resolve({data:json,index:index})
					});
					_this.request(objElem);
				})
			},
			//选择菜单
			menuCheck(data,e){
				const _this = this;
				var checkArr = data.checked;
				if(e.checked){
					var recentCheck = checkArr[checkArr.length - 1];
					if(recentCheck.indexOf(".") >= 0){
						var result = recentCheck.match(/^.+(?=\.)/)[0];
						if(checkArr.indexOf(result) < 0){
							checkArr.push(result)
						}
					}else{
						for(var i in _this.treeData){
							if(_this.treeData[i].key == recentCheck){
								var childrenNodes = _this.treeData[i].children;
								for(var idx in childrenNodes){
									if(checkArr.indexOf(childrenNodes[idx].key) < 0){
										checkArr.push(childrenNodes[idx].key);
									}
								}
							}
						}
					}
					
				}else{
					// if(recentCheck.indexOf(".") >= 0){
					var cutNode = _this.getArrDifference(_this.checkedKeys,checkArr)[0];
					if(cutNode.indexOf(".") < 0){
						var len = checkArr.length - 1;
						while(len > -1){
							if(checkArr[len].split(".")[0] == cutNode){
								checkArr.splice(len,1);
							}
							len--;
						}
					}else{
						var result = cutNode.match(/^.+(?=\.)/)[0];
						var noSelect = true;
						for(var i in checkArr){
							if(checkArr[i].indexOf(".") >= 0 && checkArr[i].split(".")[0] == result){
								noSelect = false;
							}
						}
						if(noSelect){
							checkArr.splice(checkArr.indexOf(result),1);
						}
					}
				}
				_this.checkedKeys = checkArr;
			},
			//取两个数组不同
			getArrDifference(arr1, arr2) {
				return arr1.concat(arr2).filter(function(v, i, arr) {
					return arr.indexOf(v) === arr.lastIndexOf(v);
				});
			},
			//树形结构展开
			onExpand (expandedKeys) {
				this.expandedKeys = expandedKeys
				this.autoExpandParent = false
			},
			//全选
			onCheckAllChange(e){
				const _this = this;
				if(_this.checkAll){
					_this.checkedKeys = [];
				}else{
					_this.checkedKeys = _this.allTreeKeys.concat();
				}
			},
			//确认
			confirm(){
				const  _this = this;
				if(_this.checkedKeys.length==0){
					_this.$message.error('没有选择菜单',2);
					return;
				}
				var data = [];
				var froleid = _this.$route.query.FID;
				for(var i in _this.checkedKeys){
					data.push({
						froleid:froleid,
						fmenuid:_this.checkedKeys[i]
					})
				}

				let objElem = new Object();
				let objJson = new Object();
				objElem.url = "/roleMenu/addRoleMenu";
				objJson={
					data:data,
					fid:froleid
				}
				objElem.data = objJson;
				objElem.success = (json => {
					_this.$message.success('权限设置成功',2);
				});
				_this.request(objElem);
			}
		},
		watch:{
			checkedKeys(val){//判断是否全选
				const _this = this;
				if(val.length == _this.allTreeKeys.length){
					_this.checkAll = true;
				}else{
					_this.checkAll = false;
				}
			}
		},
		beforeRouteEnter(to, from, next) {
			to.meta.title = "编辑权限-"+to.query.FRole;
			next();
		}
	}
</script>

<style>
</style>
